<template>
  <div class="video-page">
        <div class="center">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '../ProductVideo'}">功能视频</el-breadcrumb-item>
                <el-breadcrumb-item>{{this.detailsvideo.title}}</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="video">
                <video :src="this.detailsvideo.video_url" controls="controls" autoplay="autoplay">
                    您的浏览器版本过低，暂不支持播放，请升级您的浏览器!
                </video>
            </div>
            <div class="worde">
                <p v-html="this.detailsvideo.body"></p>
            </div>
            <div class="related-videos">
                <h4>相关视频</h4>
                <div v-for="(relatedvideos, index) in relatedvideo" :key="index" @mouseover="wordsColor(index)" @mouseout="wordsColor_1(index)">
                    <div  @click="getVideo(relatedvideos.id)">
                        <router-link :to="{name:'VideoPage',params:{id:relatedvideos.id}}" class="image">
                            <img :src="relatedvideos.cover" alt="相关视频图片"  >
                            <img src="/home/static/imgs/video.png" alt="" class="center-img">
                        </router-link>
                        <router-link :to="{name:'VideoPage',params:{id:relatedvideos.id}}" class="title">
                            <h5 class="titles">{{relatedvideos.title}}</h5>
                        </router-link>
                    </div>
                </div>
            </div>
        </div>
        <Footer></Footer>
  </div>
</template>
<script>
import Footer from '../../common/Footer'

export default {
  name: 'VideoPage',
  components: {
      Footer
  },
  data(){
      return{
        detailsvideo:[],
        id: null,
        relatedvideo: []    
      }
  },
 created(){
     this.getId();
     var node = this;
     window.$.get(this.apiUrl + '/articles/' + this.id,{}, function (res) {
         node.detailsvideo = res.data;
     });
    this.getRelateVideo();
 },
 methods:{
     getId(){
         this.id = this.$route.params.id
     },
    getVideo(id){
        var node = this;
        window.$.get(this.apiUrl + '/articles/' + id, function (res) {
            node.detailsvideo = res.data;
        })
        this.getRelateVideo();
    },
    getRelateVideo(){
        var node = this;
        window.$.get(this.apiUrl + '/articles/video/related',{num: 3}, function (res) {
            node.relatedvideo = res.data;
        })
    },
     wordsColor(index){
      let words = document.getElementsByClassName("titles")[index];
      words.style.color = '#009ae9';
    },
    wordsColor_1(index){
       let words = document.getElementsByClassName("titles")[index];
       words.style.color = '#000';
    }
 }
 }
</script>
<style scoped>
.video-page{
    width: 100%;
    height: auto;
}
.video-page .center{
    width: 1280px;
    height: auto;
    margin: 40px auto 100px;
}
.video-page .center .video{
    width: 1280px;
    height: 724px;
    margin-top: 40px;
}
.video-page .center .video video{
    width: 1280px;
    height: 724px;
}
.video-page .center .worde{
    width: 1280px;
    height: auto;
}
.video-page .center .worde p{
    width: 1280px;
    height: auto;
    font-size: 16px;
    color: #999;
    margin-top: 25px;
}
.video-page .center .related-videos{
    width: 1280px;
    height: 450px;
    margin-top: 100px;
}
.video-page .center .related-videos h4{
    font-size: 18px;
    width: 300px;
    height: 20px;
    line-height: 20px;
    color: #009ae9;
}
.video-page .center .related-videos div{
    display: inline-block;
    width: 360px;
    height: auto;
    margin-top: 20px;
    margin-left: 60px;
}
.video-page .center .related-videos div:nth-child(1){
    margin-left: 0;
}
.video-page .center .related-videos div .image{
    text-decoration: none;
    position: relative;
    width: 360px;
    height: auto;
    display: inline-block;
}
/* .video-page .center .related-videos div a:nth-child(2){
    height: 50px;
} */
.video-page .center .related-videos div .title{
    text-decoration: none;
    width: 360px;
    height: 26px;
    display: inline-block;
    overflow: hidden;
    margin-top: 10px;
}
.video-page .center .related-videos div .title h5{
    font-size: 24px;
    width: 100%;
    height: 29px;
    line-height: 24px;
    color: #000;
    text-align: center;
    display: inline-block;
    margin-top: 0;
}
.video-page .center .related-videos div img{
    width: 100%;
    height: 203px;
}
.video-page .center .related-videos div a .center-img{
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
</style>
